<template>
  <div id="footer">
        <!-- 分享 -->
            <div @click="showPopup">
              <van-icon size="20"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/8e24d611-e899-463a-a726-c5ca4eafbf2a.png" />
              <span>552</span>
            </div>

            <van-popup class="share" v-model="show" round position="bottom" :style="{ height: '30%' }">
                <a class="show"  href="https://im.qq.com/">
                  <img src="../assets/iconfont/icon-qq.png" alt="">
                  <p>QQ</p>
                </a>
                <a class="show" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey">
                  <img src="../assets/iconfont/icon-kj.png" alt="">
                  <p>QQ空间</p>
                </a>
                <a class="show" href="https://weixin.qq.com/">
                  <img src="../assets/iconfont/icon-wx.png" alt="">
                  <p>微信好友</p>
                </a>
                <a class="show" href="https://weixin.qq.com/">
                  <img src="../assets/iconfont/icon-pyq.png" alt="">
                  <p>朋友圈</p>
                </a>
                <a class="show" href="https://weibo.com/u/6602603777/home?wvr=5">
                  <img src="../assets/iconfont/icon-wb.png" alt="">
                  <p>微博</p>
                </a>
                <div class="show">
                  <img src="../assets/iconfont/icon-p.png" alt="">
                  <p>站内好友</p>
                </div>
                <div class="show">
                  <img src="../assets/iconfont/icon-sc.png" alt="">
                  <p>收藏</p>
                </div>
                 <div class="show">
                  <img src="../assets/iconfont/icon-pb.png" alt="">
                  <p>屏蔽该话题</p>
                </div>
                <div class="show">
                  <img src="../assets/iconfont/icon-jb.png" alt="">
                  <p>举报</p>
                </div>
            </van-popup>
            <!-- 评论 -->
            <router-link tag="div" to="./comments">
                  <van-icon size="20"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/f218b62a-f570-4ab0-8a2e-2e442c227c05.png" />
                  <span>551</span>
           </router-link>
            <!-- 点赞 -->
            <div @click="zan">
                    <van-icon size="20" v-if="isClick==0"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/a11c89e5-716d-408f-beb9-480ad27669e0.png" />
                    <van-icon size="20" v-if="isClick==1"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/4ddbf869-6b57-4cbf-879f-a4ebccf3bc52.png" />
              <span>{{num}}</span>
            </div>
            <!-- 踩 -->
            <div @click="cai">
              <van-icon size="20"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/6be0ec84-8de4-49b8-9950-3637d5182b05.png" />
              <span>踩</span>
            </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      show: false,
      value: 0,
      num: 555,
      isClick:''
    };
  },
    methods: {
       zan(){
        if(this.isClick==0){
            this.isClick=1
            this.num=this.num+1
        }else{
            this.isClick=0
            this.num=this.num-1
        }
    },
     showPopup() {
      this.show = true;
    },
        cai(){
     Toast('已踩,该评论会减少曝光');
    }
  },
};
</script>

<style lang="less" scoped>
#footer{
  display: flex;
  justify-content: space-around;
  margin-left: 17px;
  margin-top: 20px;
  margin-bottom: 10px;
  span{
        margin-left: 15px;

  }
  .share{
     display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
}
/deep/ .van-overlay{
    background-color:rgba(27, 21, 23, 0.205);
}

.show{
  flex-direction: column;
  img{
      width: 50px;
      height: 50px;
      margin: 10px;
  }
  p{
   text-align: center;
    margin-top: 1px;
    font-size: 10px;
  }
}


</style>